<script setup>
import Card1 from "@/views/Futures/components/slider/Card1/index.vue";
import Card2 from "@/views/Futures/components/slider/Card2/index.vue";
import Card3 from "@/views/Futures/components/slider/Card3/index.vue";
</script>

<template>
 <div class="slider flex">
  <Card1 />

  <Card2 />

  <Card3 />
 </div>
</template>

<style scoped lang="scss">
.slider {
 flex-direction: column;
 width: 390px;
 border-right: 1px solid $card_border_color;
}

::v-deep {
 .card {
  border-bottom: 1px solid $card_border_color;
  padding: 20px;

  &_header {
   &_title {
    position: relative;
    padding-left: 20px;
    @include Font((color: $colorA, size: 16px, weight: bold));

    &:before {
     content: '';
     position: absolute;
     left: 0;
     top: 0;
     bottom: 0;
     margin: auto 0;
     width: 4px;
     height: 70%;
     background-color: $colorA;
    }
   }
  }
 }
}
</style>